<template>
	<!-- 线上课详情 -->
	<view>
		<u-navbar :bgColor="bgColor" title=" " @leftClick="onBackClick" :titleStyle="titleStyle" leftIconColor="#E6A5B4">

		</u-navbar>
		<view class="bgV">
			<scroll-view style="height: 100%;" scroll-y="true" @scroll="onListenerScroll">
				<view class="topIv">
					<u-swiper :list="detailsData.images" :autoplay="true" indicatorStyle="right: 20px" height="450rpx"
						radius="0" circular>
					</u-swiper>
				</view>

				<view class="centerV">
					<view class="titleV">
						<view class="titleTv">{{detailsData.title}}</view>
						<image @click="onCollectionClick()" class="guanzhuIv"
							:src="detailsData.is_collection==1?'../../static/public/collection_to.svg':'../../static/public/collection.svg'">
						</image>
						<view @click="onShareClick()" class="shareV">
							<image class="shareIv" src="../../static/public/share.svg"></image>
							<button v-if="detailsData" class="shareTv" open-type="share">分享有礼</button>
						</view>
					</view>

					<view style="margin-top: 30rpx; margin-left: 30rpx; display: flex;">
						<view v-for="(item,key) in typeDataList" :key="key" class="typeItemV">{{item}}</view>
					</view>

					<view class="jieshaoV">
						<view class="jieshaoTitle">课程介绍</view>
						<view class="jieshaoTv">{{detailsData.content}}</view>
					</view>

					<view class="jieshaoV">
						<view class="jieshaoTitle">课程须知</view>
						<view class="jieshaoTv">{{detailsData.xuzhi}}</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="bottomV">

			<view class="addOreder" @click="onYueClick()">预约</view>

		</view>

		<ns-login ref="login" @saveUserInfo="onUserInfoClick"></ns-login>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				id: null,
				detailsData: null,
				scrollTop: 0,
				bgColor: "#00000000",
				typeDataList: [],
				userId: ''
			}
		},
		onReady() {
			let hei = uni.getSystemInfoSync().statusBarHeight;
			this.scrollTop = hei;
		},
		onLoad(op) {
			console.log("==" + JSON.stringify(op))
			this.id = op.id;
			this.userId = op.userid;


			if (uni.getStorageSync("user_info")) {
				this.getOnlineDetail()
				this.getBind();
			} else {
				this.$refs.login.open({
					show: false
				});
			}
		},
		onShareAppMessage: function(res) {
			console.log("开始分享接收参数--->" + JSON.stringify(res))
			let shopId = this.id;
			let userId = uni.getStorageSync("user_info_id");
			return {
				title: this.detailsData.title,
				path: `pages/schedule/OnlineDetails?id=` + shopId + `&userid=` + userId, // 分享后打开的页面
				success: function(res) {
					console.log("转发成功")
				},
				fail: function(res) {
					console.log("转发失败")
				}
			}
		},
		methods: {
			onBackClick() {
				let pages = getCurrentPages();
				if (pages[pages.length - 2]) {
					//如果有上一页，就返回上一页
					wx.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/app/Home'
					});
				}

			},
			onUserInfoClick(e) {
				if (e.code == 200) {
					this.getOnlineDetail()
					this.getBind();
				} else {

				}
			},
			getBind() { //绑定上下级
				if (this.userId==undefined||this.userId.length == 0) {
					return;
				}
				this.$api.getBind({
					share_id: this.userId,
				}).then((res) => {

				}).catch((e) => {

				})
			},
			getOnlineDetail() {
				this.$api.getOnlineDetail({
					id: this.id
				}).then((res) => {
					this.detailsData = res;
					this.typeDataList = res.target
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onYueClick() { //立即预约
				let userInfo = uni.getStorageSync("user_info");
				if (!userInfo) {
					this.$refs.login.open({
						show: false
					});
				} else {
					this.$u.route({
						url: '/pages/schedule/OnlineAdd',
						params: {
							id: this.id,
						}
					})
				}
			},
			onListenerScroll: function(value) {
				if (value.detail.scrollTop > this.scrollTop) {
					this.bgColor = "#FFFFFF"
				} else {
					this.bgColor = "#00000000"
				}
			},
			onCollectionClick() { //收藏
				this.$api.addCollection({
					type: "online",
					id: this.id
				}).then((res) => {
					this.getOnlineDetail()

				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "请求失败" : e.msg)
				})
			},
			onShareClick() { //分享

			}
		}
	}
</script>

<style lang="scss">
	.bgV {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.topIv {
			width: 100%;
			height: 450rpx;
			background-color: #ff0000;
		}

		.centerV {
			width: 100%;
			// height: 100%;
			flex: 1;
			border-radius: 10rpx 10rpx 0rpx 0rpx;
			box-sizing: border-box;
			margin-top: -20rpx;
			z-index: 9;
			background-color: #FFFFFF;
			margin-bottom: 120rpx;

			.titleV {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-left: 30rpx;
				padding-right: 30rpx;
				padding-top: 50rpx;
				box-sizing: border-box;

				.titleTv {
					color: #e8e8e8;
					font-size: 36rpx;
					max-width: 450rpx;
					min-width: 450rpx;
				}

				.guanzhuIv {
					width: 32rpx;
					height: 32rpx;
				}

				.shareV {
					display: flex;
					align-items: center;

					.shareIv {
						width: 32rpx;
						height: 32rpx;
					}

					.shareTv {
						margin-left: 5rpx;
						color: #979797;
						font-size: 28rpx;
						background-color: #00000000;
					}

					button::after {
						border: none;
					}

					button {
						position: relative;
						display: block;
						margin-left: auto;
						margin-right: auto;
						padding-left: 0px;
						padding-right: 0px;
						box-sizing: border-box;
						text-align: center;
						text-decoration: none;
						line-height: 1.35;
						-webkit-tap-highlight-color: transparent;
						overflow: hidden;
						color: #000000;
						background-color: #fff;
						width: 100%;
						height: 100%;
					}
				}
			}

			.typeItemV {
				background: #CEF743;
				border-radius: 20rpx;
				font-size: 24rpx;
				color: #333333;
				padding-left: 25rpx;
				padding-right: 25rpx;
				padding-top: 4rpx;
				padding-bottom: 4rpx;
				margin-right: 10rpx;
			}

			.jieshaoV {
				display: flex;
				flex-direction: column;
				margin-left: 30rpx;
				margin-right: 30rpx;
				background: #1F1F1F;
				border-radius: 10rpx;
				margin-top: 30rpx;
				padding: 30rpx;
				box-sizing: border-box;

				.jieshaoTitle {
					color: #fff;
					font-size: 32rpx;
				}

				.jieshaoTv {
					font-size: 28rpx;
					color: #8d8d8d;
					margin-top: 30rpx;
				}

			}
		}
	}

	.bottomV {
		display: flex;
		height: 98rpx;
		align-items: center;
		z-index: 10;
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		background-color: #FFFFFF;

		.moneyV {
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;

			.moneyTv1 {
				color: #fff;
				font-size: 28rpx;
			}

			.moneyTv2 {
				color: #E6A5B4;
				font-size: 36rpx;
				margin-left: 30rpx;
			}
		}

		.lineV {
			width: 1rpx;
			height: 40rpx;
			background: #383838;
		}

		.songV {
			display: flex;
			flex-direction: column;
			flex: 0.4;
			align-items: center;
			justify-content: center;

			.songIv {
				width: 31rpx;
				height: 31rpx;
			}

			.songTv {
				font-size: 22rpx;
				margin-top: 8rpx;
				color: #CEF743;
			}
		}

		.addOreder {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #CEF743;
			font-size: 32rpx;
			color: #333737;
		}

		.addOrederTo {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #383838;
			font-size: 32rpx;
			color: #858585;
			border-radius: 10rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
		}
	}
</style>
